<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <title>title</title>
        <style>
            html, body {
                width: 100%;
                background: transparent;
                margin:0;
                padding:0;
            }
            #line {
                width: 250px;
                height: 10px;
                background: -webkit-gradient(linear,center top,center bottom,from(rgba(0,0,0,0)), to(#ff2d4d));
                opacity: 0.5;
                /*background: transparent;*/
                /*border-bottom:  1px solid #ff2d4d;*/
                /*
                box-shadow:inset 0 0px 20px #ff2d4d;
                -webkit-box-shadow: inset 0 0px 20px #ff2d4d;
                -moz-box-shadow: inset 0 0px 20px #ff2d4d;
                */
            }
            #line:active {
                height: 100px;
            }
            .backgroundColorHalf{
                background-color: rgba(0,0,0,0.5);
            }
            .backgroundColorAll{
                background-color: rgba(0,0,0,0);
            }
        </style>
        <link rel="stylesheet" href="../../css/font/font-awesome.css">
    </head>
    <body>
        <div>
            <div id="top" class="backgroundColorHalf" style="display:flex;">
                <div id="top-left">
                    <div id="topback" style="border: 0px solid rgba(0,0,0,0.5);border-radius: 50px;width: 40px;height: 40px;background: rgba(255,255,255,0.5);margin: 40px auto">
                        <i class="fa fa-angle-left" style="font-size: 30px;margin: 5px -7px 5px 13px;color: #000000;width:100%;"></i>
                        <span style="text-overflow:ellipsis; white-space:nowrap; overflow:hidden;" class="fa fa-angle-left">返回</span>
                    </div>
                </div>
                <div id="top-center" style="display:flex;">
                    <div id="top-center-left" style="border-bottom:2px solid #ff2d4d;"></div>
                    <div id="top-center-center" style="text-align: center;padding-top: 100px;">
                        <div style="color:#ff2d4d;font-size:24px;font-weight:bold;">扫码添加好友</div>
                        <div style="color:#fff;margin-top:10px;font-size:20px;font-weight:bold;">请扫描二维码</div>
                    </div>
                    <div id="top-center-right" style="border-bottom:2px solid #ff2d4d;"></div>
                </div>
                <div id="top-right"></div>
            </div>
            <div id="center" style="display:flex;">
                <div id="center-left" class="backgroundColorHalf" >
                    <div id="center-left-top" style="border-right:2px solid #ff2d4d;"></div>
                    <div id="center-left-center"></div>
                    <div id="center-left-bottom" style="border-right:2px solid #ff2d4d;"></div>
                </div>
                <div id="center-center" class="backgroundColorAll">
                    <div id="line" class="backgroundColorAll"></div>
                </div>
                <div id="center-right" class="backgroundColorHalf" >
                    <div id="center-right-top" style="border-left:2px solid #ff2d4d;"></div>
                    <div id="center-right-center"></div>
                    <div id="center-right-bottom" style="border-left:2px solid #ff2d4d;"></div>
                </div>
            </div>
            <div id="bottom" class="backgroundColorHalf" style="display:flex;">
                <div id="bottom-left"></div>
                <div id="bottom-center" style="display:flex;">
                    <div id="bottom-center-left" style="border-top:2px solid #ff2d4d;"></div>
                    <div id="bottom-center-center"></div>
                    <div id="bottom-center-right" style="border-top:2px solid #ff2d4d;"></div>
                </div>
                <div id="bottom-right"></div>
            </div>
            <div id="desc" class="backgroundColorHalf">
                <div style="text-align: center;color: #ddd;font-size: 12px;">将二维码放入框内，即可自动扫描</div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../script/common/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        var h = 0;
        //
        apiready = function() {
            setInterval(moveline,10);
        };
        //
        function moveline() {
            var line = $('#line');
            if (h == 249) {
                h = 0;
            } else {
                h = h + 1;
            }
            var hstr = h + 'px';
            $('#line').css('height', hstr);
            $('#lineCover').css('height', hstr - 10);
        }
        //
        $(document).ready(function(){
            (function(){
                //
                var wHeight             = $(window).height();
                var wWidth              = $(window).width();
                var topHeight           = 200;
                var centerLineHeight    = 250;
                var centerLeftWidth     = (wWidth - 250) / 2;
                var bottomHeight        = 10;
                var descHeight          = wHeight - topHeight - centerLineHeight - bottomHeight;
                var borderHeight        = 22;
                //
                $('#top').css('height',topHeight + 'px');
                $('#top-left').css('width',(centerLeftWidth - 2) + 'px');
                
                $('#top-center').css('width',(centerLineHeight + 4) + 'px');
                $('#top-center-left').css('width',borderHeight + 'px');
                $('#top-center-center').css('width',((centerLineHeight + 4) - borderHeight * 2) + 'px');
                $('#top-center-right').css('width',borderHeight + 'px');

                $('#top-right').css('width',(centerLeftWidth - 2)+ 'px');
                //
                $('#center-left').css('width',centerLeftWidth + 'px');
                $('#center-left').css('height',centerLineHeight + 'px');
                $('#center-left-top').css('height',borderHeight + 'px');
                $('#center-left-center').css('height',(centerLineHeight - borderHeight * 2) + 'px');
                $('#center-left-bottom').css('height',borderHeight + 'px');
                //
                $('#center-right').css('width',centerLeftWidth + 'px');
                $('#center-right').css('height',centerLineHeight + 'px');
                $('#center-right-top').css('height',borderHeight + 'px');
                $('#center-right-center').css('height',(centerLineHeight - borderHeight * 2) + 'px');
                $('#center-right-bottom').css('height',borderHeight + 'px');
                //
                $('#bottom').css('height',bottomHeight + 'px');
                $('#bottom-left').css('width',(centerLeftWidth - 2) + 'px');
                
                $('#bottom-center').css('width',(centerLineHeight + 4) + 'px');
                $('#bottom-center-left').css('width',borderHeight + 'px');
                $('#bottom-center-center').css('width',((centerLineHeight + 4) - borderHeight * 2) + 'px');
                $('#bottom-center-right').css('width',borderHeight + 'px');

                $('#bottom-right').css('width',(centerLeftWidth - 2)+ 'px');
                //
                $('#desc').css('height',descHeight + 'px');
                //
                $('#top-left').on('click', function(){
                     api.sendEvent({
                        name : 'closeScaner',
                        extra : {
                            type: 'back'
                        }
                    });
                })
            })();
        });
       
    </script>
</html>